<template>
  <Button
    v-show="mappingProps.visible"
    class="tr-button-text t-badge"
    text-color="rgb(255,255,255)"
    border-color="rgb(220, 220, 220)"
    :icon="mappingProps.icon"
    :label="mappingProps.badgeText"
    :disable="mappingProps.disable"
    @click="handleClick"
    :tabIndex="(mappingProps.badgeText && !mappingProps.disable) ? mappingProps.tabIndex : -1"
  >
    <Component
      ref="refComponent"
      class="t-badge-content"
      :class="mappingProps.isDot ? 't-badge--dot' : ''"
      v-bind="{ ...attrs, ...{class: null, style: null, id: null}, ...mappingProps }"
      :style="{
        'opacity':
          (mappingProps.label === 0 || mappingProps.label === '0') & mappingProps.badgeHiddenWhenZero
            ? 0
            : 1,
        'vertical-align': 'middle',
      }"
      :label="
        mappingProps.isDot
          ? undefined
          : mappingProps.label > mappingProps.max
            ? `${mappingProps.max}+`
            : mappingProps.label
      "
      :tabIndex="!mappingProps.disable ? mappingProps.tabIndex : -1"
    >
      <slot></slot>
    </Component>
  </Button>
</template>

<script setup>
import Component from '@teld/q-components/Badge';
// Button 引用源改为艺飞二次修改过样式的 '../button'
// import Button from '@teld/q-components/Button';
import useMappingProps from 't/common/hooks/useMappingProps';
import { commonProps } from 't/common/utils';
import { computed, ref, useAttrs, useSlots } from 'vue';
import Button from '../button';
const refComponent = ref();
const slots = useSlots();
const attrs = useAttrs();
const props = defineProps({
  ...commonProps,
  ...Component.props,
  color: {
    type: String,
    default() {
      return '';
    },
  },
  // 徽标内容
  label: {
    // 对应 quasar-badge 的 label
    // 元数据中, 出码的映射关系 - 1.设计时用 lable 对应此字段,(展示为”模拟数据“字段) 2.运行时用 labelExp 对应本字段(展示位"徽标内容"字段)
    type: String || Number,
    default() {
      return '';
    },
  },
  max: {
    type: Number,
    default() {
      return 99;
    },
  },
  isDot: {
    type: Boolean,
    default() {
      return false;
    },
  },
  badgeHiddenWhenZero: {
    type: Boolean,
    default() {
      return false;
    },
  },

  // 低代码不对外暴露的属性，且设置默认效果
  align: {
    type: String,
    default() {
      return 'top';
    },
  },
  floating: {
    type: Boolean,
    default() {
      return true;
    },
  },
  rounded: {
    type: Boolean,
    default() {
      return true;
    },
  },
  // quasar-badge-textColor-default 已经是 #fff了

  // 给按钮用的
  // visible
  icon: {
    type: String,
    default() {
      return '';
    },
  },
  // 废弃，统一成 disable - 元数据+此处修改 - 注意逻辑也要反过来。
  enable: {
    type: Boolean,
    default() {
      return true;
    },
  },
  disable: {
    type: Boolean,
    default() {
      return false;
    },
  },
  badgeText: {
    type: String,
    default() {
      return '';
    },
  },
  // 低代码传入的是 tabIndex，而非 tabindex, 就是为了覆盖前者
  tabIndex: {
    type: [String, Number],
    default() {
      return 0;
    },
  },
});
const [mappingProps, mappingExpose] = useMappingProps(props);
defineExpose(mappingExpose);
// // Git push 时如何避免出现"Merge branch 'master' of ..."
// 展示为红点
// max
// 隐藏（opacity）：不传时, 无值时，( 0 + badgeHiddenWhenZero )
//
// 直接展示
const computedLabel = computed(() => {
  return mappingProps.isDot
    ? undefined
    : mappingProps.label > mappingProps.max
      ? `${mappingProps.max}+`
      : mappingProps.label;
});
// == 事件 ==
const emit = defineEmits(['click']);

// 点击事件
const handleClick = params => {
  emit('click', params);
};
</script>

<style lang="scss">
.t-badge {
  div {
    box-sizing: border-box;
  }
}
.t-badge.t-button {
  min-width: 0px;
  padding: 0;
  min-width: 0;
  height: 14px; // 增加一个高度，防止被容器影响，导致徽标便宜，t-button 默认 height: auto
}
.t-badge.tr-button-text:not(:hover,:focus,:active){
  color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9));
}
.t-badge-content.q-badge--floating {
  box-sizing: border-box;
  padding: 0 5px;
  min-width: 16px;
  height: 16px;
  background: #FF5A66; // 默认颜色 // 放到 color props属性中也可以
  // 为了营造 徽标压住按钮 6px 的效果
  top: -100%;
  left: 100%;
  bottom: unset;
  right: unset;
  margin-left: -6px;
  margin-top: 6px;
}
.t-badge-content.q-badge--floating.t-badge--dot {
  transform: translateY(-2px) scale(.375); // Y位移 -2px -> 修正视觉偏移; scale 得到所需大小,  16 -> 6
  transform-origin: bottom left;
  // min-width: 6px;
  // min-height: 6px;
  // width: 6px;
  // height: 6px;
  // padding: 0;
}
</style>
